import React, { Component } from 'react';
import { View, Text, ScrollView, FlatList } from 'react-native';
import { observer } from 'mobx-react';
import { Scene, Actions } from 'react-native-router-flux';
import _ from 'lodash';
import Icon from '../../../components/NavBarIconBtn';
import Item from './components/item';
import store from '../models/policies';
import styles from './components/styles';
import NoneData from '../../../components/noneData';
import navBarStyle from '../../../components/navBarStyle';

@observer
class Policies extends Component {
  onItemPress = policy => {
    /* 
    TODO 暂时不允许访问保单详情
    */
    return;
    Actions.familyPolicyDetail({
      policy,
      customerId: this.props.customerId,
      customerName: this.props.customerName
    });
  };
  renderItems = ({ item, index }) => {
    return (
      <Item
        onItemPress={this.onItemPress.bind(this.props.store, item)}
        key={`member_${index}`}
        customerId={this.props.customerId}
        customerName={this.props.customerName}
        store={this.props.store}
        {...item}
      />
    );
  };
  keyExtractor = item => _.isNumber(item.policyId) ? item.policyId.toString() : item.policyId;
  render() {
    if (this.props.store.data.length < 1) {
      return <NoneData />;
    }
    return (
      <ScrollView>
        <FlatList
          data={this.props.store.data}
          renderItem={this.renderItems}
          keyExtractor={this.keyExtractor}
          style={styles.list}
        />
      </ScrollView>
    );
  }
}

const AddPolicy = ({ customerId }) => (
  <Icon
    name="plus-square"
    title="保单"
    onPress={() => Actions.createFamilyPolicy({ customerId })}
  />
);

module.exports = (
  <Scene
    key="familyPolicyList"
    component={Policies}
    title={({customerName}) => `${customerName}的保单`}
    path="family/:customerId/policies"
    hideTabBar
    renderRightButton={({ customerId }) => (
      <AddPolicy customerId={customerId} />
    )}
    {...navBarStyle}
    store={store}
    onEnter={({ customerId }) => store.init(customerId)}
  />
);
